<template>
  <div :class="{'mainLeft':true,}">
    <div id="sideNavi">
      <!-- {{ selectId }} -->
      <el-menu :default-active="selectId" :collapse="false" :unique-opened="true" @select="selectMenu"
        @open="fatherMenuOpen">
        <el-submenu v-for="(item, index) in menuList" :key="item.navId" :index="item.navId" :title="item.navName">
          <template slot="title">
            <div class="titleFirst">{{ item.navName }}</div>
          </template>
          <el-menu-item v-if="item.children.length > 0" v-for="(temp, index) in item.children" :key="temp.navId"
            :index="temp.navId" :title="temp.navName" :id="'menu' + temp.navId">{{ temp.navName }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="careerListOut">
      <div class="realTop fixedTop" v-if="selectedClass.length">
        <div v-for="(item, index) in selectedClass" :class="{
            selectedDepName: true,
            activeDepName: item.depId == selectedDepId,
          }" @click="changeSelectedDepId(item.depId)">
          <span><span v-if="item.depId == selectedDepId">已选：</span>{{ item.depName }}</span>
        </div>
      </div>
      <div id="careerContent" :class="{ careerContentLessMargin: !selectedClass.length,'canScroll':canScroll }"
        v-loading="listLoading" @mousewheel="mouseWheel">
        <div class="careerTitle" v-if="careerList.length > 0">
          <div class="titleFlag" />
          {{ currentFatherName }}
          <!-- <div class="topSecondName">{{ currentSecondName }}</div> -->
        </div>
        <div class="loading" v-if="loadingTop">
          <i class="el-icon-loading"></i><span>加载中</span>
        </div>
        <el-empty description=" " v-if="emptyPage"></el-empty>

        <div class="careerUnit" v-for="(item, index) in careerList" :key="item.navId" :id="item.navId">
          <div class="careerTitle" :id="'career' + item.navId" v-if="index != 0">
            <div class="titleFlag" />
            {{ item.navName }}
          </div>
          <div class="careerList">
            <div v-for="(itemSecond, indexSecond) in item.careers" :key="itemSecond.navId" :id="itemSecond.navId"
              class="aContent">
              <div class="secondName">{{ itemSecond.navName }}</div>
              <div class="secondCareer col-sm-2a col-md-2a col-lg-3a col-xl-5a col-xxl-6a col-xxxl-7a col-xxxxl-8a">
                <div class="careerItem" v-for="(itemThird, indexThird) in itemSecond.children" :key="itemThird.navId"
                  :id="itemThird.parentId" :class="selectedHigh(itemThird.parentId, indexThird)"
                  @click="clickItem(itemThird)">
                  <div class="navPhoto" v-if="indexThird == 0" :style="{
                      'background-image': `url(${itemThird.backImage})`,
                    }">
                    <img :src="itemSecond.navPhoto || defaultManPic" />
                  </div>
                  <div class="careerName" :class="indexThird == 0 ? 'largeCareerName' : ''">
                    {{ itemThird.navName }}
                    <img v-if="itemThird.collect" src="../../../assets/home/collect.png" class="collect" />
                  </div>
                  <div class="careerCategory" :class="indexThird == 0 ? 'largeCareerCategory' : ''">
                    <div>
                      {{ `${itemThird.navDesc || "暂无描述"}` }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="loading" v-if="loadingBottom">
          <i class="el-icon-loading"></i><span>加载中</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { positions } from "@/api/home.js";
import throttle from "../../../utils/throttle.js";

export default {
  props: {
    selectedClass: {
      type: Array,
      default: [],
    },
    SecretKey: {
      type: String,
      default: "",
    },
  },
  computed: {
    canScroll() {
      return this.$store.state.settings.canScroll;
    },
  },
  data() {
    return {
      selectedDepId: "",
      defaultManPic: require("../../../assets/home/defaultMan.png"),
      careerList: [],
      selectId: "",
      isGettingList: false,
      loadingBottom: false,
      loadingTop: false,
      listLoading: false,
      navIds: "",
      currentPageId: [],
      emptyPage: false,
      selectIdNoChange: "",
      // isFatherMenu: "",
      currentFatherName: "",
      currentSecondName: "",
      throttledOnScroll: null,
      menuList: [],
      imageNumber: 0,
      mouseToward: null, //鼠标滚动方向
    };
  },
  watch: {
    selectedClass: {
      handler(val) {
        if (val && val.length) {
          // console.log("进入1", val);

          this.selectedDepId = +sessionStorage.getItem("selectedDepId");
          //如果选了专业，但是没点击专业，固定选第一个
          if (!this.selectedDepId) {
            this.changeSelectedDepId(val[0].depId);
            return;
          }
          const ids = val.map((item) => {
            return +item.depId;
          });
          //如果选了专业，点过的专业已经没了，也固定选第一个
          if (ids.indexOf(this.selectedDepId) == -1) {
            this.changeSelectedDepId(val[0].depId);
          } else {
            //如果选了专业，点过的专业也还在，那就复原
            this.changeSelectedDepId(this.selectedDepId);
          }
        } else {
          //如果没有选专业，直接获取全部
          // if (this.selectedDepId == "") return;
          this.selectedDepId = "";
          this.reqGetDefaultPositionTree();
        }
      },
      // immediate: true,
    },
  },
  beforeCreate() {
    this.selectedDepId = sessionStorage.getItem("selectedDepId");
  },
  mounted() {
    this.startListenScroll();
  },
  destroy() {
    this.stopListenScroll();
  },
  methods: {
    //鼠标滚动放向
    mouseWheel(e) {
      if (e.wheelDelta || e.detail) {
        if (e.wheelDelta > 0 || e.detail < 0) {
          //当鼠标滚轮向上滚动时
          this.mouseToward = "up";
          // //console.log("向上");
        }
        if (e.wheelDelta < 0 || e.detail > 0) {
          //当鼠标滚轮向下滚动时
          this.mouseToward = "down";
          // //console.log("向下");
        }
      }
    },
    addBackPng(careers) {
      careers.forEach((sec) => {
        this.imageNumber++;
        if (this.imageNumber > 3) {
          this.imageNumber = 1;
        }
        sec.children[0].backImage = require(`@/assets/linearBackImg/back${this.imageNumber}.png`);
      });
      return careers;
    },
    changeSelectedDepId(id) {
      // console.log("changeSelectedDepId", id);

      this.selectedDepId = id;
      sessionStorage.setItem("selectedDepId", this.selectedDepId);
      this.reqGetDefaultPositionTree();
    },
    reqGetDefaultPositionTree() {
      this.emptyPage = false;
      this.getThirdPositionList(0);
      return;
    },
    //更新收藏状态
    updateSearchListCollect({ topName, parentName, valueId }) {
      let topData = this.careerList.find((top) => top.navName === topName);
      if (topData) {
        // 找到一级数据
        let parentData = topData.careers.find(
          (parent) => parent.navName === parentName
        );
        if (parentData) {
          // 找到二级数据
          let index = parentData.children.findIndex(
            (career) => career.valueId === valueId
          );
          if (index !== -1) {
            // 找到三级数据
            parentData.children[index].collect = false; // 改变isCollect属性为false
            // console.log(this.careerList); // 输出更新后的数据结构
          }
        }
      }
    },
    // 开启监听器
    startListenScroll() {
      const careerContent = document.getElementById("careerContent");
      this.throttledOnScroll = throttle(this.onScroll, 300);
      careerContent.addEventListener("scroll", this.throttledOnScroll);
    },
    // 移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
    stopListenScroll() {
      document
        .getElementById("careerContent")
        .removeEventListener("scroll", this.throttledOnScroll);
      this.throttledOnScroll = null;
    },
    clickItem(item) {
      let routeData = this.$router.resolve({
        path: "/position-detail",
        query: {
          id: item.valueId,
          name: item.navName,
          collect: item.collect,
          // fatherTitle: `${item.topTitle} · ${item.parentTitle}`,
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
          customerName: this.$route.query.customerName,
        },
      });
      window.open(routeData.href, "_blank");
    },
    //列表发生变化，默认为第一项，并且重新请求第一项三级列表
    getThirdPositionList(navId) {
      let result = {};
      this.listLoading = true;
      if (document.getElementById("careerContent")) {
        document.getElementById("careerContent").scrollTop = 0;
      }
      positions({
        // customerId: 1000,
        depIds: this.selectedDepId,
      }).then((res) => {
        if (res.code == 200) {
          if (res.data.length == 0) {
            this.menuList = res.data;
            this.careerList = [];
            this.currentPageId = [];
            this.emptyPage = true;
          } else {
            this.menuList = res.data;
            this.selectId = this.menuList[0].children[0].navId || "";
            const first3 = res.data.slice(0, 3);
            this.currentPageId = [];
            first3.forEach((item) => {
              item.careers = this.addBackPng(item.children);
              this.currentPageId.push(item.navId);
            });
            this.careerList = first3;
            this.getCurrentPageFatherName();
          }
        }
        this.isGettingList = false;
        this.loadingTop = false;
        this.loadingBottom = false;
        this.listLoading = false;
      });
    },
    //立即滚动到菜单二级菜单位置；
    rollToSecondMenu(key) {
      this.$nextTick(function () {
        requestAnimationFrame(() => {
          setTimeout(() => {
            var el = document.getElementById(key);
            var scrollContainer = document.getElementById("careerContent");
            //console.log("scrollContainer", scrollContainer);

            if (el) {
              this.scrollElementIntoView(el, scrollContainer);
              return;
              // el.scrollIntoView({
              //   behavior: "auto",
              //   block: "start",
              //   inline: "nearest",
              // });
            }
          }, 200);
          setTimeout(() => {
            if (this.throttledOnScroll == null) {
              this.startListenScroll();
            }
          }, 1000);
          // document.getElementById("careerContent").scrollTo(0, currentPositionToTop - 50);
        });
        setTimeout(() => {
          this.selectId = key;
        }, 400);
      });
    },
    //真正的滚动函数，上面本来用的scrollToView有问题
    scrollElementIntoView(el, scrollContainer) {
      // 获取滚动容器的高度
      const containerHeight = scrollContainer.clientHeight;
      // 获取滚动容器当前的滚动位置（距离顶部的距离）
      const containerTop = scrollContainer.scrollTop;
      // 计算目标元素相对于滚动容器顶部的距离
      const elTop = el.offsetTop - scrollContainer.offsetTop;
      // 获取目标元素的高度
      const elHeight = el.clientHeight;

      // 计算滚动位置，使目标元素出现在滚动容器的中间位置
      // 公式解释：
      // elTop - (containerHeight / 2) 计算出目标元素的顶部应该滚动到的位置，使其出现在容器中间
      // + (elHeight / 2) 确保目标元素的中间部分对齐容器的中间位置
      // const scrollToPosition = elTop - containerHeight / 2 + elHeight / 2;
      const scrollToPosition = elTop;

      scrollContainer.scrollTop = scrollToPosition;
    },
    selectedHigh(current, index) {
      let activeClass = "";
      activeClass += current == this.selectIdNoChange ? "selectedHigh " : "";
      activeClass += index == 0 ? "large" : "";
      return activeClass;
    },
    fatherMenuOpen(key) {
      let selectedFather = this.menuList.filter((item) => {
        return item.navId == key;
      });
      let selectId = selectedFather[0].children[0].navId;
      this.selectMenu(selectId, [key, selectId]);
    },
    selectMenu(key, key2) {
      // this.getCurrentPageFatherName();
      //判断点击的菜单是否在缓存列表内，如果是，则不请求，同事锚点定位到元素位置,同时清空当前职位列表为新数据
      // //console.log("key, key2", key, key2);
      this.selectId = key;
      this.selectIdNoChange = key;
      this.getCurrentPageFatherName();
      this.stopListenScroll();
      if (this.currentPageId.indexOf(key2[0]) >= 0) {
        this.rollToSecondMenu(key);
      } else {
        this.currentPageId = [];
        for (let i = 0; i < this.menuList.length; i++) {
          if (this.menuList[i].navId == key2[0]) {
            let lastIndex = i - 1;
            if (lastIndex < 0) {
              lastIndex = 0;
            }
            let sli = this.menuList.slice(lastIndex, i + 2);
            sli.forEach((item) => {
              item.careers = this.addBackPng(item.children);
              this.currentPageId.push(item.navId);
            });
            this.careerList = sli;
            this.rollToSecondMenu(key);
            return;
          }
        }
      }
    },
    // 获取上一个或者下一个项的index
    getLastOrNextListItem(topOrBottom) {
      if (topOrBottom == 1) {
        //触底
        for (let i in this.menuList) {
          if (
            this.menuList[i].navId ==
            this.currentPageId[this.currentPageId.length - 1]
          ) {
            if (i < this.menuList.length) {
              let curr = this.menuList[Number(i) + 1];
              curr.careers = this.addBackPng(curr.children);
              this.currentPageId.push(curr.navId);
              this.careerList.push(curr);
            }
            this.isGettingList = false;
            return;
          }
        }
      } else {
        //触顶
        for (let i in this.menuList) {
          if (this.menuList[i].navId == this.currentPageId[0]) {
            if (i > 0) {
              let curr = this.menuList[Number(i) - 1];
              curr.careers = this.addBackPng(curr.children);
              this.currentPageId.unshift(curr.navId);
              this.careerList.unshift(curr);
            }
            this.isGettingList = false;
            return;
          }
        }
      }
    },
    async reachTopBottom(topOrBottom) {
      this.getLastOrNextListItem(topOrBottom);
    },
    onScroll() {
      let that = this;
      const navContents = document.querySelectorAll(".aContent");
      // 所有锚点元素的 offsetTop
      const offsetTopArr = [];
      navContents.forEach((item) => {
        let temp = {
          offsetTop: item.offsetTop,
          parentId: item.id,
        };
        offsetTopArr.push(temp);
      });
      // 获取当前文档流的 scrollTop
      let scrollTop =
        document.getElementById("careerContent").scrollTop ||
        document.body.scrollTop;
      // 定义当前点亮的导航下标
      let navIndex = "";
      for (let n = 0; n < offsetTopArr.length; n++) {
        if (scrollTop - offsetTopArr[n].offsetTop > -50) {
          //一行多个以最前面的为准
          navIndex = offsetTopArr[n].parentId;
        }
      }
      if (navIndex == "") {
        navIndex = offsetTopArr[0].parentId;
      }
      //菜单随右侧滚动
      this.selectId = navIndex;
      let scrollTopMenu = document.getElementById("sideNavi").scrollTop;
      let currentMenu = document.getElementById("menu" + navIndex);
      let currentMenuToTop = currentMenu.offsetTop;
      let currentMenuHeight = document.getElementById("sideNavi").clientHeight;
      let toTop = currentMenuToTop - scrollTopMenu;
      if (toTop < 0 || toTop > currentMenuHeight - 300) {
        currentMenu.scrollIntoView({
          behavior: "auto",
          block: "center",
          inline: "nearest",
        });
      }
      this.getCurrentPageFatherName();

      //触底刷新
      const clientHeight =
        document.getElementById("careerContent").clientHeight;
      const scrollHeight =
        document.getElementById("careerContent").scrollHeight;
      if (
        !this.isGettingList &&
        scrollTop + clientHeight + 500 >= scrollHeight &&
        this.mouseToward == "down"
      ) {
        // //console.log("触底了~");
        // 此处可以调用获取数据的方法
        this.isGettingList = true;
        this.reachTopBottom(1);
      } else if (
        !this.isGettingList &&
        scrollTop >= 1 &&
        scrollTop <= 1000 &&
        this.mouseToward == "up"
      ) {
        // //console.log("触顶了~");
        this.isGettingList = true;
        this.reachTopBottom(2);
      }
    },
    getCurrentPageFatherName() {
      //判断当前滚动页面一级父菜单
      let navName = "";
      let navName2 = "";

      this.menuList.forEach((item) => {
        item.children &&
          item.children.forEach((item_item) => {
            if (item_item.navId == this.selectId) {
              navName = item.navName;
              navName2 = item_item.navName;
              return;
            }
          });
      });
      this.currentFatherName = navName;
      this.currentSecondName = navName2;
    },
  },
};
</script>

<style scoped lang="scss">
* {
  scroll-behavior: auto;
}
.mainLeft {
  display: flex;
  flex: 1;
  background: #f1f4f9;
  width: 100%;
  border-radius: 18px;
  padding-top: 18px;
  margin-right: 12px;
  height: calc(100vh - 146px);
  z-index: 2;
  #sideNavi {
    width: 145px;
    overflow-y: scroll;
    overflow-x: hidden;
    border-bottom-left-radius: 18px;
  }
  .careerListOut {
    padding-bottom: 10px;
    min-width: 800px;
    position: relative;
    overflow: hidden;
    // margin-left: 12px;
    flex: 1;
    width: 0;
    .fixedTop {
      padding-left: 1%;
      left: 0;
      top: 0;
      padding-bottom: 5px;
      position: absolute;
      background: transparent;
      width: 99%;
    }
    .selectedDepName {
      position: relative;
      display: flex;
      // width: 171px;
      margin-right: 40px;
      height: 25px;
      font-size: 18px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #7a8b99;
      line-height: 25px;
      cursor: pointer;
      z-index: 1;
      span {
        z-index: 3;
      }
    }
    .activeDepName {
      color: #000;
      // &::after {
      //   content: "";
      //   z-index: 2;
      //   position: absolute;
      //   bottom: 4px;
      //   left: 50%;
      //   width: 52px;
      //   height: 7px;
      //   border-radius: 50% / 100% 100% 0 0;
      //   background: linear-gradient(
      //     to bottom,
      //     #0b6eff,
      //     #87b6fb 4px,
      //     /* 10% 转换为 4px */ #cee0fa 8px,
      //     /* 22% 转换为 8px */ #f1f4f9 9px /* 25% 转换为 9px */
      //   );
      //   transform: skewX(180deg) translateX(-55%) translateY(50%);
      // }
    }

    .realTop {
      display: flex;
      margin-bottom: 22px;
      font-size: 18px;
      display: flex;
      align-items: center;
      font-weight: 600;
      margin-left: 1%;
    }
    .careerTitle {
      display: flex;
      margin-bottom: 12px;
      font-size: 18px;
      display: flex;
      align-items: center;
      font-weight: 600;
      margin-left: 1%;
      margin-top: 18px;

      .titleFlag {
        width: 4px;
        height: 17px;
        border-radius: 32px;
        background-color: #409eff;
        margin-right: 8px;
      }
      .topSecondName {
        color: #7a8b99;
        font-size: 15px;
        margin-left: 14px;
        font-weight: 400;
      }
    }
    #careerContent {
      height: calc(100%);
      overflow-y: hidden;
      padding-bottom: 20px;
      margin-top: 30px;
      padding: 0 18px;
      padding-right: 22px;
      &.canScroll {
        overflow-y: scroll;
        padding-right: 18px;
      }
      .careerUnit {
        padding-bottom: 10px;
        .careerList {
          width: 100%;
          .secondName {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #7a8b99;
            line-height: 22px;
            padding: 2px 2px 14px 2px;
            margin-left: 1%;
          }
          .secondCareer {
            display: grid;
            grid-auto-rows: 88px; /* 设置行高为88px */
            grid-gap: 16px;
            // padding: 0 1%;
            padding-bottom: 20px;
          }
          .careerItem {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 0;
            height: 88px;
            background: rgba(252, 252, 252, 1);
            border-radius: 9px;
            // border: 1px solid #f0f0f0;
            margin-bottom: 18px;
            transition: 0.2s ease-out;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.2s;
            &:hover {
              border-color: #0b6eff;
              transition-delay: 0.2s;
              transform: translateY(-10%);
              .careerName {
                color: #0b6eff;
                transition-delay: 0.2s;
              }
              .careerCategory {
                background: #0b6eff;
                transition-delay: 0.2s;
                color: #fff;
              }
            }
            &:before {
              content: "";
              position: absolute;
              width: 400px;
              height: 120%;
              background-color: rgba(11, 110, 255, 0.05);
              top: 50%;
              transform: skewX(30deg) translate(-100%, -50%);
              transition: all 0.4s;
            }
            &:hover::before {
              transform: skewX(30deg) translate(100%, -50%);
              transition-delay: 0.1s;
            }
            .navPhoto {
              flex: 1;
              margin: 8px;
              margin-bottom: 0;
              width: auto;
              // background-image: linear-gradient(
              //   45deg,
              //   #8c90ff 0%,
              //   #b4e7fe 100%
              // );
              animation: backgroundGradient 5s linear infinite;
              border-radius: 6px;
              position: relative;
              background-size: 100% auto;
              img {
                position: absolute;
                left: 50%;
                bottom: 0;
                transform: translateX(-50%);
                height: 90%;
                width: auto;
              }
            }
            @keyframes backgroundGradient {
              0% {
                background-position: left;
              }
              50% {
                background-position: right;
              }
              100% {
                background-position: left;
              }
            }

            .careerName {
              height: 52px;
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #222222;
              display: flex;
              align-items: center;
              line-height: 22px;
              padding-left: 15px;
              padding-right: 40px;
              position: relative;
              transition: all 0.5s;
              .collect {
                position: absolute;
                width: 18px;
                height: 18px;
                right: 12px;
              }
            }
            .largeCareerName {
              height: 38px;
              padding-top: 12px;
            }
            .careerCategory {
              letter-spacing: 0.5px;
              position: relative;
              display: flex;
              align-items: center;
              padding-left: 15px;
              width: 100%;
              height: 36px;
              background: linear-gradient(
                276deg,
                rgba(218, 240, 247, 0.1) 0%,
                rgba(230, 240, 255, 0.3) 100%
              );
              border-radius: 0px 0px 6px 6px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #9cabb7;
              line-height: 20px;
              transition: all 0.5s;
              div {
                width: 96%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            .largeCareerCategory {
              background: none;
              height: 38px;
              padding-bottom: 2px;
            }
          }
          .large {
            grid-row: span 2;
            grid-column: span 1;
            height: 196px;
            box-shadow: 0px 5px 13px 0px #d6e2f4;
          }
          .selectedHigh {
            border: 1px #0b6eff solid;
            // box-shadow: 0.5px 0.5px 5px #0b6eff;
            .careerCategory {
              color: #0b6eff;
            }
            & ~ div {
              border: 1px solid #f0f0f0;
              box-shadow: none;
              .careerCategory {
                color: #9cabb7;
              }
            }
          }
        }
      }
      .loading {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          margin-left: 10px;
          color: #999999;
        }
      }
    }
    .careerContentLessMargin {
      margin-top: 0px !important;
    }
  }
}
.titleFirst {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 115px;
}
::-webkit-scrollbar {
  width: 4px;
  // background-color: #f1f4f9;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(207, 216, 230, 1);
  border-radius: 2px;
}
::v-deep .el-menu {
  width: 145px;
  border-right: 0px;
  background: #f5f5f5;
}
::v-deep .el-menu-item {
  padding: 0;
  padding-left: 35px !important;
  padding-right: 20px;
  min-width: 145px;
  max-width: 145px;
  height: 41px;
  line-height: 41px;
  font-size: 14px;
  color: #657182;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(219, 226, 237, 1);
  text-overflow: ellipsis;
}
::v-deep .el-submenu__title {
  height: 41px;
  line-height: 41px;
  padding-left: 26px !important;
  color: #999999;
  background: #f1f4f9;
  // overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
::v-deep .el-menu-item.is-active {
  color: #0b6eff;
}
::v-deep .el-submenu.is-active > .el-submenu__title {
  color: #f1f4f9;
  padding-left: 14px !important;
  margin-left: 12px;
  background: #0b6eff;
  border-radius: 8px;
  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 41px;
    background: #0b6eff;
    position: absolute;
    left: -12px;
    border-radius: 8px;
  }
  .el-icon-arrow-down:before {
    color: #fff;
  }
}

::v-deep .el-icon-arrow-down:before {
  color: #999999;
}

@media (min-width: 576px) {
  .col-sm-2a {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  }
}
@media (min-width: 995px) {
  .col-lg-3a {
    grid-template-columns: repeat(auto-fill, minmax(33.3%, 1fr));
  }
}
@media (min-width: 1200px) {
  .col-lg-3a {
    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
  }
}
@media (min-width: 1400px) {
  .col-xl-5a {
    grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
  }
}
@media (min-width: 1800px) {
  .col-xxl-6a {
    grid-template-columns: repeat(auto-fill, minmax(16.7%, 1fr));
  }
}
@media (min-width: 2200px) {
  .col-xxxl-7a {
    grid-template-columns: repeat(auto-fill, minmax(14.2%, 1fr));
  }
}
@media (min-width: 2600px) {
  .col-xxxxl-8a {
    grid-template-columns: repeat(auto-fill, minmax(12.5%, 1fr));
  }
}
</style>
